<script setup>
import MoniterItem from "@/components/MoniterItem.vue";
// import * as echarts from "echarts";
import { onMounted, inject, reactive, nextTick } from "vue";
const $axios = inject("$axios");
onMounted(() => {
  // dom = document.getElementById("siteChart");
  // myChart = echarts.init(dom, null, {
  //   renderer: "canvas",
  //   useDirtyRect: false,
  // });

  // getChartData("月");
  // getBackHomeCount();
});
// 获取数据
function getBackHomeCount() {
  $axios
    .get("person_back_home/backHomeSum")
    .then((res) => {
      res.data.data.forEach((item) => {
        tableData.push({
          number: item.orders,
          palce: item.village,
          added: item.newToday,
          count: item.total,
          reded: item.reds,
          yellowed: item.yellows,
          quarantine: item.focus,
          home: item.home,
        });
      });
    })
    .then(nextTick)
    .then(() => {
      autoScroll();
    });
}

function autoScroll() {
  const el = document.querySelector("#tableList4");
  const elHeight = el.offsetHeight;
  const sHeight = el.scrollHeight;
  setInterval(() => {
    if (el.scrollTop < sHeight - elHeight) {
      el.scrollTop++;
    } else {
      el.scrollTop = 0;
    }
  }, 100);
}

// 定义数据
const tableData = reactive([
  // {
  //   number: "1",
  //   palce: "黄寨镇",
  //   added: "12",
  //   count: "22",
  //   reded: "34",
  //   yellowed: "44",
  //   quarantine: "34",
  //   home: "4344",
  // },
  // {
  //   number: "1",
  //   palce: "黄寨镇",
  //   added: "12",
  //   count: "22",
  //   reded: "34",
  //   yellowed: "44",
  //   quarantine: "34",
  //   home: "4344",
  // },
  // {
  //   number: "1",
  //   palce: "黄寨镇",
  //   added: "12",
  //   count: "22",
  //   reded: "34",
  //   yellowed: "44",
  //   quarantine: "34",
  //   home: "4344",
  // }
]);

function openWindow() {
  window.open("https://bpmn.honqun.com/admin/#/yq/RiskPlace")
}
function getChartData(type) {
  $axios
    .get("place_scan_rec/placeSaceRate", { params: { period: type } })
    .then((res) => {
      const xAxis = [];
      const data = [];
      res.data.data.forEach((item) => {
        xAxis.push(item.name);
        data.push(item.times);
      });
      option = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xAxis,
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 0,
              type: "solid",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "rgba(219,225,255,1)",
            },
          },
          splitLine: {
            //分割线配置
            show: false,
            lineStyle: {
              color: "rgba(219,225,255,1)",
            },
          },
        },
        yAxis: {
          name: "单位:个",
          type: "value",
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "rgba(219,225,255,1)",
              margin: 15,
            },
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //y轴线的颜色以及宽度
            show: false,
            lineStyle: {
              color: "rgba(219,225,255,.5)",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,.3)",
            },
          },
        },
        series: [
          {
            data: data,
            type: "bar",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#21D0FF" },
                { offset: 1, color: "#007BFA " },
              ]),
            },
            // emphasis: {
            //   itemStyle: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //       { offset: 0, color: "#2378f7" },
            //       { offset: 0.7, color: "#2378f7" },
            //       { offset: 1, color: "#83bff6" },
            //     ]),
            //   },
            // },
          },
        ],
      };

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }

      window.addEventListener("resize", myChart.resize);
    });
}

var dom;
var myChart;
var option;
</script>

<template>
  <MoniterItem title="隔离点人员情况" @timeUnitClicked="getChartData">
    <template #right>
        <a href="/admin/#/yq/PersonCentralIsolated" style="color: #00f9ff;text-decoration: none;" target="_blank">更多》</a>
    </template>
    <template #content>
      <!-- <div style="height: 100%" id="siteChart"></div> -->
      <div class="line" style="font-size: 14px;font-weight: 600">
        <div style="flex: 0.5">序号</div>
        <div style="flex: 1">隔离点名称</div>
        <div style="flex: 0.8">现有人数</div>
        <div style="flex: 0.8">当日隔离</div>
        <div style="flex: 0.8">当日解除</div>
        <div style="flex: 0.8">剩余床位</div>
      </div>
      <div style="height: 90%; font-size: 14px; overflow: auto" id="tableList4">
        <div
          :class="{ line: true, lineColor: index % 2 === 1 }"
          v-for="(item, index) in tableData"
          :key="index"
          ref="tableRef"
        >
          <div style="flex: 0.5">{{ item.number }}</div>
          <div style="flex: 1">{{ item.palce }}</div>
          <div style="flex: 0.8">{{ item.added }}</div>
          <div style="flex: 0.8">{{ item.count }}</div>
          <div style="flex: 0.8">{{ item.reded }}</div>
          <div style="flex: 0.8">{{ item.yellowed }}</div>
        </div>
      </div>
    </template>
  </MoniterItem>
</template>

<style lang="less" scoped>
a.more {
  color: #00f9ff;
  text-decoration: none;
}
.line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  div {
    text-align: center;
  }
}
.lineColor {
  background-color: #2a64b1;
}
</style>
